import { View, Text, Image, StyleSheet, TextInput, Button } from 'react-native'
import React, { useState } from 'react'
import ZhPage from './ZhPage'
import UIConstants from '../constants/UIConstants'
import AntDesign from '@expo/vector-icons/AntDesign'
import Ionicons from '@expo/vector-icons/Ionicons';
import ZhButton from '../components/ZhButton'
let logo = require('../assets/img/logo.png')

export default function ZhLogin() {
  let [phone, setPhone] = useState('')  //电话号码
  let [pwd, setpwd] = useState('') //密码
  let [hidePwd, setHidePwd] = useState(true) //是否隐藏密码
  return (
    <ZhPage bgColor={UIConstants.COLOR_WHITE}>
      {/* LOGO */}
      <Image source={logo} style={ss.logo} />
      {/* 手机号输入框 */}
      <View style={ss.inputGroup}>
        <AntDesign name='mobile1' size={28} color={UIConstants.COLOR_GREEN} />
        <TextInput placeholder='请输入手机号码' style={ss.input} keyboardType='phone-pad' value={phone} onChangeText={val => setPhone(val)}></TextInput>
        {phone != '' && <AntDesign name="closecircle" size={22} color="#1296db" onPress={() => setPhone('')} />}
      </View>
      {/* 密码提交框 */}
      <View style={ss.inputGroup}>
        <AntDesign name='lock1' size={28} color={UIConstants.COLOR_GREEN} />
        <TextInput placeholder='请输入密码' secureTextEntry={hidePwd} style={ss.input} value={pwd} onChangeText={val => setpwd(val)}></TextInput>
        <Ionicons name={hidePwd ? "eye-off" : "eye"} size={22} color={UIConstants.COLOR_GRAY} onPress={() => setHidePwd(!hidePwd)} />

      </View>
      {/* 提交按钮 */}
      <View style={ss.btnBox}>
        <ZhButton title='登 录' bgColor="#009" onPress={() =>console.log('登录')}></ZhButton>
      </View>
      {/* 忘记密码链接 */}
      <Text style={{ marginTop: UIConstants.SPACE_COL_LG * 2, textAlign: 'center', color: UIConstants.COLOR_BLUE }}>
        忘记密码？
      </Text>
    </ZhPage>
  )
}

let ss = StyleSheet.create({
  logo: {
    marginLeft: 'auto',
    marginRight: 'auto',
    marginTop: UIConstants.SPACE_COL_XL * 7
  },
  inputGroup: {
    backgroundColor: '#F8F8F8',
    marginHorizontal: UIConstants.SPACE_ROW_XL,
    height: 52,
    borderRadius: UIConstants.BORDER_RADIUS_MD,
    flexDirection: 'row',
    alignItems: 'center',
    marginTop: UIConstants.SPACE_COL_LG * 3,
    paddingHorizontal: UIConstants.SPACE_ROW_MD
  },
  input: {
    flex: 1
  },
  btnBox:{
    paddingHorizontal: UIConstants.SPACE_ROW_LG,
    marginTop: UIConstants.SPACE_COL_XL * 3,
  }
})